<template>
  <div class="tags">
    <!--    伪选择框-->
    <div class="tags-box" :class="[selectType == true?'tags-box-border-choose':'tags-box-border']">
      <span class="tags-box-title" v-if="!tagsForm">请选择优先级</span>
      <div class="tags-item" v-if="tagsForm">
        <div class="select-item-sign" :style="{backgroundColor:tagsForm.color}"></div>
        <span class="tags-item-title">{{ tagsForm.label }}</span>
        <!-- <i class="el-icon-close tags-item-icon" @click="delClick"></i> -->
      </div>
      <!-- <i class="tags-box-icon el-icon-arrow-down" :class="[selectType == false?'transformIconChoose':'transformIcon']"></i> -->
    </div>
    <el-select ref="tagsSelect" style="width: 100%" v-model="selectTitle" @visible-change="visibleChange" size="medium" placeholder="请选择">
      <template slot="empty">
        <div class="select">
          <div :class="[tagsIndex == index?'select-item-choose':'select-item']" v-for="(item,index) in options" @click.stop="groupClick(item,index)">
            <div style="display: flex;flex-direction: row;align-items: center">
              <div class="select-item-sign" :style="{backgroundColor:item.color}"></div>
              <span>{{ item.label }}</span>
            </div>
          </div>
          <el-empty description="暂无数据" :image-size="40" v-if="options.length == 0"></el-empty>
        </div>
      </template>
    </el-select>
  </div>
</template>
<script>
	import {
		update
	} from '@/api/task'
export default {
  data() {
    return {
     options: [{
       value: '01',
       label: '严重',
       type: false,
       color:'#ff5630'
     }, {
       value: '02',
       label: '主要',
       type: false,
       color:'#ff8118'
     },
     {
       value: '04',
       label: '次要',
       type: false,
       color:'#1a5eff'
     },
     {
       value: '05',
       label: '不重要',
       type: false,
       color:'#36b37e'
     },
     {
       value: '00',
       label: '无优先级',
       type: false,
       color:'#c1c7d0'
     }],
      selectTitle: '',
      selectType:false,
      tagsForm:null,
      checkboxloading:false,
      tagsIndex:-1
    }
  },
  props:['data'],
  watch:{
  	data: {
  	  handler(val, oldval) {
  		  this.filterTags(val)
  	  },
  	  // 深度观察监听
  	  deep: true,
  	  immediate:true
  	}
  },
  methods: {
    groupClick(item,index) {
      this.tagsForm = item;
      var _this = this
      if (_this.tagsIndex == index){
        _this.tagsForm = null
        _this.tagsIndex = -1
      }else {
        _this.tagsForm = item
        _this.tagsIndex = index
        _this.$refs.tagsSelect.blur()
      }
	  this.updateClick(item)
    },
    delClick(){
      this.tagsForm = null
      this.tagsIndex = -1
    },
    filterClick(){
      var _this = this
      var data = []
      _this.options.forEach(function(item) {
        if (item.type == true) {
          data.push(item)
        }
      })
      _this.tagsForm = data
    },
    visibleChange(item) {
      var _this = this
      _this.selectType = item
    },
	filterTags(val){
		var _this = this
		if(val){
			_this.options.forEach(function(item,index){
				if(item.value == val.matrix){
					_this.tagsForm = item,
					_this.tagsIndex = index
				}
			})
		}
	},
	updateClick(data){
		var _this = this
		_this.data.matrix = _this.tagsForm.value
		update(_this.data).then(res=>{
			console.log(res)
		})
	}
  }
}
</script>

<style scoped>
.select {
  max-height: 380px;
  overflow: auto;
}

.select-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 10px;
  cursor: pointer;
  color: #333333;
  justify-content: space-between;
}

.select-item:hover {
  background-color: rgba(88, 96, 105, 0.06);
}

.select-item-choose {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 10px;
  cursor: pointer;
  background-color: rgba(194, 214, 255, 0.22);
  color: #2c7ef8;
  justify-content: space-between;
}

.select-item-sign{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}


.tags-item{
  /* padding: 3px 6px; */
  /* background-color: #ecedf0; */
  border-radius: 3px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 10px;
}

.tags-item-title{
  max-width: 66px;
  font-size: 12px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 5px;
}

.tags-item-icon{
  font-size: 12px;
  color: #909aaa;
  margin-top: 1px;
  pointer-events: auto;
}



.tags {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e47777;
  border-radius: 4px;
  position: relative;
}

.tags:hover > .tags-box{
  background-color: #F5F6F8;
}

.tags-box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: 4px;
  pointer-events: none;
  background-color: #fafbfb;
  padding-left: 10px;
  padding-right: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tags-box-icon{
  color: #C0C4CC;
  font-size: 14px;
  transition: transform .3s;
  cursor: pointer;
  position: absolute;
  right: 10px;
}

.transformIcon{
  transform: rotateZ(-180deg);
}

.transformIconChoose{
  transform: rotateZ(0deg);
}

.tags-box-border{
  /* border: 1px solid #DCDFE6; */
}

.tags-box-border-choose{
  border: 1px solid #1890ff;
}

.tags-box-title{
  color: #C0C4CC;
  font-size: 14px;
}



</style>
